<!--<template>-->
<!--  <div class="main">-->
<!--    &lt;!&ndash; 搜索区域 &ndash;&gt;-->
<!--    <div class="search">-->
<!--      <el-form :model="meb" ref="searchForm" :inline="true" class="search-form">-->
<!--        <el-form-item label="姓名：" prop="name">-->
<!--          <el-input v-model="meb.name" style="width: 150px" placeholder="请输入姓名" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="手机号：" prop="phone">-->
<!--          <el-input v-model="meb.phone" style="width: 150px" placeholder="请输入手机号" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="账号：" prop="account">-->
<!--          <el-input v-model="meb.account" style="width: 150px" placeholder="请输入账号" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="性别：" prop="sex">-->
<!--          <el-select v-model="meb.sex" style="width: 120px" placeholder="请选择性别" clearable>-->
<!--            <el-option label="男" value="男"/>-->
<!--            <el-option label="女" value="女"/>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="状态：" prop="enabled">-->
<!--          <el-select v-model="meb.enabled" style="width: 120px" placeholder="请选择状态" clearable>-->
<!--            <el-option label="启用" :value="true"/>-->
<!--            <el-option label="禁用" :value="false"/>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="邮箱：" prop="email">-->
<!--          <el-input v-model="meb.email" style="width: 180px" placeholder="请输入邮箱" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="QQ：" prop="qq">-->
<!--          <el-input v-model="meb.qq" style="width: 150px" placeholder="请输入QQ号" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="微信：" prop="wechat">-->
<!--          <el-input v-model="meb.wechat" style="width: 150px" placeholder="请输入微信号" clearable/>-->
<!--        </el-form-item>-->

<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="search" :icon="Search">查询</el-button>-->
<!--          <el-button @click="resetSearch" :icon="Refresh">重置</el-button>-->
<!--          <el-button type="success" @click="add" :icon="Plus">添加</el-button>-->
<!--          <el-button type="danger" @click="deleteRows" :icon="Delete">批量删除</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->

<!--    &lt;!&ndash; 数据展示区域 &ndash;&gt;-->
<!--    <div class="data">-->
<!--      <div class="gird">-->
<!--        <el-table :data="tableData" border style="width: 100%"-->
<!--                  :header-cell-style="{ textAlign: 'center', background: '#f5f7fa', fontWeight: 'bold' }"-->
<!--                  :cell-style="{ textAlign: 'center' }" ref="tableRef"-->
<!--                  v-loading="loading"-->
<!--                  @selection-change="handleSelectionChange">-->
<!--          <el-table-column type="selection" width="55"/>-->
<!--          <el-table-column prop="id" label="ID" width="80" fixed="left"/>-->
<!--          <el-table-column prop="name" label="姓名" width="120" fixed="left"/>-->
<!--          <el-table-column prop="account" label="账号" width="120"/>-->
<!--          <el-table-column prop="phone" label="手机号" width="130"/>-->
<!--          <el-table-column prop="email" label="邮箱" width="180"/>-->
<!--          <el-table-column prop="sex" label="性别" width="80"/>-->
<!--          <el-table-column prop="birthday" label="生日" width="120"/>-->
<!--          <el-table-column prop="qq" label="QQ" width="120"/>-->
<!--          <el-table-column prop="wechat" label="微信" width="120"/>-->
<!--          <el-table-column prop="height" label="身高(cm)" width="100"/>-->
<!--          <el-table-column prop="weight" label="体重(kg)" width="100"/>-->
<!--          <el-table-column prop="race" label="民族" width="100"/>-->
<!--          <el-table-column prop="nationality" label="国籍" width="100"/>-->
<!--          <el-table-column prop="addrDetail" label="详细地址" width="200" show-overflow-tooltip/>-->

<!--          &lt;!&ndash; 状态列 - 改为Switch开关 &ndash;&gt;-->
<!--          <el-table-column prop="enabled" label="状态" width="120" fixed="right">-->
<!--            <template #default="scope">-->
<!--              <div style="display: flex; justify-content: center; align-items: center; height: 100%;">-->
<!--                <el-switch v-model="scope.row.enabled"-->
<!--                           @change="updateIsLocked(scope.row)"-->
<!--                           :active-value="true"-->
<!--                           :inactive-value="false"-->
<!--                           active-text="启用"-->
<!--                           inactive-text="禁用"-->
<!--                           inline-prompt-->
<!--                           style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949;"/>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->

<!--          <el-table-column label="操作" width="180" fixed="right">-->
<!--            <template #default="scope">-->
<!--              <el-button size="small" :icon="Edit" @click="editRow(scope.row)" type="primary">编辑</el-button>-->
<!--              <el-button size="small" :icon="Delete" @click="deleteRow(scope.row)" type="danger">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->

<!--      &lt;!&ndash; 分页 &ndash;&gt;-->
<!--      <div class="pagination">-->
<!--        <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"-->
<!--                       :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"-->
<!--                       :total="pi.total" background @size-change="paginate" @current-change="paginate"/>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 新增/编辑对话框 &ndash;&gt;-->
<!--    <el-dialog v-model="show" :title="title" width="900" draggable :close-on-click-modal="false">-->
<!--      <el-form :model="mfm" ref="formRef" label-width="100px" :rules="rules">-->
<!--        <el-row :gutter="20">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="姓名：" prop="name">-->
<!--              <el-input v-model="mfm.name" placeholder="请输入姓名"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="账号：" prop="account">-->
<!--              <el-input v-model="mfm.account" placeholder="请输入账号"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="手机号：" prop="phone">-->
<!--              <el-input v-model="mfm.phone" placeholder="请输入手机号"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="密码：" prop="password">-->
<!--              <el-input v-model="mfm.password" type="password" placeholder="请输入密码"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="邮箱：" prop="email">-->
<!--              <el-input v-model="mfm.email" placeholder="请输入邮箱"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="QQ：" prop="qq">-->
<!--              <el-input v-model="mfm.qq" placeholder="请输入QQ号"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="12">-->
<!--            <el-form-item label="微信：" prop="wechat">-->
<!--              <el-input v-model="mfm.wechat" placeholder="请输入微信号"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="性别：" prop="sex">-->
<!--              <el-select v-model="mfm.sex" placeholder="请选择性别">-->
<!--                <el-option label="男" value="男"/>-->
<!--                <el-option label="女" value="女"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="生日：" prop="birthday">-->
<!--              <el-date-picker v-model="mfm.birthday" type="date" placeholder="选择生日" style="width: 100%"/>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="状态：" prop="enabled">-->
<!--              <el-select v-model="mfm.enabled" placeholder="请选择状态">-->
<!--                <el-option label="启用" :value="true"/>-->
<!--                <el-option label="禁用" :value="false"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="身份证号：" prop="cardId">-->
<!--              <el-input v-model="mfm.cardId" placeholder="请输入身份证号"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row :gutter="20">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="身高(cm)：" prop="height">-->
<!--              <el-input-number v-model="mfm.height" :min="0" :max="250"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="12">-->
<!--            <el-form-item label="体重(kg)：" prop="weight">-->
<!--              <el-input-number v-model="mfm.weight" :min="0" :max="200" :precision="1"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-form-item label="详细地址：" prop="addrDetail">-->
<!--          <el-input v-model="mfm.addrDetail" type="textarea" :rows="2" placeholder="请输入详细地址"/>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="个性签名：" prop="description">-->
<!--          <el-input v-model="mfm.description" type="textarea" :rows="2" placeholder="请输入个性签名"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      <template #footer>-->
<!--        <div class="dialog-footer">-->
<!--          <el-button @click="show = false">取消</el-button>-->
<!--          <el-button type="primary" @click="submitForm">确认</el-button>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {ref, onMounted, reactive} from 'vue'-->
<!--import {-->
<!--  findAll,-->
<!--  deleteById,-->
<!--  save,-->
<!--  update as updateMember,-->
<!--  updateIsLocked as updateMemberIsLocked,-->
<!--  deleteAll-->
<!--} from '@/api/MemberApi'-->
<!--import {ElMessage, ElMessageBox} from 'element-plus'-->
<!--import {Plus, Edit, Search, Refresh, Delete} from '@element-plus/icons-vue'-->

<!--// 表格引用-->
<!--const tableRef = ref()-->
<!--const formRef = ref()-->
<!--// 表格数据-->
<!--const tableData = ref([])-->
<!--// 对话框显示状态-->
<!--const show = ref(false)-->
<!--// 加载状态-->
<!--const loading = ref(false)-->
<!--// 对话框标题-->
<!--const title = ref("新增会员")-->
<!--// 选中行-->
<!--const selectedRows = ref([])-->

<!--// 搜索条件-->
<!--const meb = reactive({-->
<!--  name: "",-->
<!--  phone: "",-->
<!--  account: "",-->
<!--  sex: "",-->
<!--  enabled: null,-->
<!--  email: "",-->
<!--  qq: "",-->
<!--  wechat: ""-->
<!--})-->

<!--// 表单数据-->
<!--const mfm = reactive({-->
<!--  name: "",-->
<!--  phone: "",-->
<!--  account: "",-->
<!--  password: "",-->
<!--  enabled: true,-->
<!--  sex: "",-->
<!--  email: "",-->
<!--  qq: "",-->
<!--  wechat: "",-->
<!--  birthday: "",-->
<!--  height: null,-->
<!--  weight: null,-->
<!--  cardId: "",-->
<!--  addrDetail: "", // 修改为 addrDetail-->
<!--  description: ""-->
<!--})-->

<!--// 表单验证规则-->
<!--const rules = reactive({-->
<!--  name: [{required: true, message: '请输入姓名', trigger: 'blur'}],-->
<!--  phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],-->
<!--  account: [{required: true, message: '请输入账号', trigger: 'blur'}]-->
<!--})-->

<!--// 分页信息-->
<!--const pi = ref({-->
<!--  pageNo: 1,-->
<!--  pageSize: 15,-->
<!--  total: 0,-->
<!--})-->

<!--// 组件挂载时加载数据-->
<!--onMounted(() => {-->
<!--  search()-->
<!--})-->

<!--// 格式化日期-->
<!--function formatDate(dateString) {-->
<!--  if (!dateString) return ''-->
<!--  return new Date(dateString).toLocaleString()-->
<!--}-->

<!--// 处理选中行变化-->
<!--function handleSelectionChange(selection) {-->
<!--  selectedRows.value = selection-->
<!--}-->

<!--// 搜索方法-->
<!--async function search() {-->
<!--  try {-->
<!--    loading.value = true-->
<!--    console.log("当前搜索条件:", JSON.stringify(meb, null, 2))-->
<!--    // 只传递非空的查询参数-->
<!--    const searchParams = {}-->
<!--    Object.keys(meb).forEach(key => {-->
<!--      if (meb[key] !== '' && meb[key] !== null && meb[key] !== undefined) {-->
<!--        // 如果是性别字段，同时尝试两种参数名-->
<!--        if (key === 'sex') {-->
<!--          searchParams['sex'] = meb[key]-->
<!--          // searchParams['gender'] = meb[key]-->
<!--        } else {-->
<!--          searchParams[key] = meb[key]-->
<!--        }-->
<!--      }-->
<!--    })-->

<!--    // 添加调试日志-->
<!--    console.log("发送的查询参数:", searchParams)-->

<!--    let resp = await findAll(pi.value.pageNo, pi.value.pageSize, searchParams)-->

<!--    console.log("API响应:", resp)-->

<!--    if (resp && resp.code === "200" && resp.data) {-->
<!--      // tableData.value = resp.data.records || []-->
<!--      tableData.value = resp.data.records-->

<!--      // 处理地址显示 - 如果地址为空，显示"暂无地址"-->
<!--      tableData.value.forEach(member => {-->
<!--        if (!member.addrDetail || member.addrDetail.trim() === '') {-->
<!--          member.addrDetail = "暂无地址"-->
<!--        }-->
<!--      })-->

<!--      pi.value.total = resp.data.total || 0-->
<!--      pi.value.pageNo = resp.data.current || 1-->
<!--      pi.value.pageSize = resp.data.size || 20-->

<!--      ElMessage.success(`加载成功，共 ${resp.data.total} 条数据`)-->
<!--    } else {-->
<!--      ElMessage.error("数据格式错误")-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error("搜索失败:", error)-->
<!--    ElMessage.error("获取数据失败")-->
<!--  } finally {-->
<!--    loading.value = false-->
<!--  }-->
<!--}-->

<!--// 分页查询-->
<!--function paginate() {-->
<!--  search()-->
<!--}-->

<!--// 重置搜索-->
<!--function resetSearch() {-->
<!--  Object.keys(meb).forEach(key => {-->
<!--    if (key === 'enabled') {-->
<!--      meb[key] = null-->
<!--    } else {-->
<!--      meb[key] = ""-->
<!--    }-->
<!--  })-->
<!--  pi.value.pageNo = 1-->
<!--  search()-->
<!--}-->

<!--// 删除单行-->
<!--function deleteRow(row) {-->
<!--  ElMessageBox.confirm(`确定要删除会员【${row.name}】吗？`, "警告", {-->
<!--    type: "warning",-->
<!--  }).then(async () => {-->
<!--    let resp = await deleteById(row.id)-->
<!--    if (resp.code === "200") {-->
<!--      ElMessage.success("删除成功")-->
<!--      search()-->
<!--    } else {-->
<!--      ElMessage.error(resp.msg || "删除失败")-->
<!--    }-->
<!--  }).catch(() => {-->
<!--  })-->
<!--}-->

<!--// 批量删除-->
<!--function deleteRows() {-->
<!--  if (selectedRows.value.length === 0) {-->
<!--    ElMessage.warning("请选择要删除的会员")-->
<!--    return-->
<!--  }-->

<!--  const names = selectedRows.value.map(row => row.name).join('、')-->
<!--  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个会员吗？\n${names}`, "警告", {-->
<!--    type: "warning",-->
<!--  }).then(async () => {-->
<!--    const ids = selectedRows.value.map(row => row.id)-->
<!--    let resp = await deleteAll(ids)-->
<!--    if (resp.code === "200") {-->
<!--      ElMessage.success("批量删除成功")-->
<!--      search()-->
<!--    } else {-->
<!--      ElMessage.error(resp.msg || "删除失败")-->
<!--    }-->
<!--  }).catch(() => {-->
<!--  })-->
<!--}-->

<!--// 添加会员-->
<!--function add() {-->
<!--  show.value = true-->
<!--  title.value = "新增会员"-->
<!--  // 重置表单数据-->
<!--  Object.keys(mfm).forEach(key => {-->
<!--    if (key === 'enabled') {-->
<!--      mfm[key] = true-->
<!--    } else if (key === 'height' || key === 'weight') {-->
<!--      mfm[key] = null-->
<!--    } else {-->
<!--      mfm[key] = ""-->
<!--    }-->
<!--  })-->
<!--}-->

<!--// 提交表单-->
<!--function submitForm() {-->
<!--  formRef.value.validate(async (valid) => {-->
<!--    if (valid) {-->
<!--      try {-->
<!--        const formData = {...mfm}-->
<!--        let resp-->
<!--        if (formData.id) {-->
<!--          resp = await updateMember(formData)-->
<!--        } else {-->
<!--          resp = await save(formData)-->
<!--        }-->

<!--        if (resp.code === "200") {-->
<!--          ElMessage.success(formData.id ? "修改成功" : "添加成功")-->
<!--          show.value = false-->
<!--          search()-->
<!--        } else {-->
<!--          ElMessage.error(resp.msg || "操作失败")-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error("操作失败:", error)-->
<!--        ElMessage.error("操作失败")-->
<!--      }-->
<!--    }-->
<!--  })-->
<!--}-->

<!--// 编辑行-->
<!--function editRow(row) {-->
<!--  show.value = true-->
<!--  title.value = "修改会员"-->
<!--  // 复制行数据到表单-->
<!--  Object.assign(mfm, row)-->
<!--}-->

<!--// 更新启用状态-->
<!--async function updateIsLocked(row) {-->
<!--  try {-->
<!--    const resp = await updateMemberIsLocked(row.id, row.enabled)-->

<!--    if (resp.code === "200") {-->
<!--      ElMessage.success(row.enabled ? "启用成功" : "禁用成功")-->
<!--    } else {-->
<!--      // 操作失败，恢复原来的状态-->
<!--      row.enabled = !row.enabled-->
<!--      ElMessage.error(resp.msg || "操作失败")-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error("状态更新失败:", error)-->
<!--    // 操作失败，恢复原来的状态-->
<!--    row.enabled = !row.enabled-->
<!--    ElMessage.error("状态更新失败")-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.main {-->
<!--  padding: 20px;-->
<!--  background: #f5f7fa;-->
<!--  min-height: calc(100vh - 60px);-->
<!--}-->

<!--.search {-->
<!--  background: #fff;-->
<!--  padding: 20px;-->
<!--  border-radius: 8px;-->
<!--  margin-bottom: 20px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.search-form {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 15px;-->
<!--}-->

<!--.search-form .el-form-item {-->
<!--  margin-bottom: 0;-->
<!--}-->

<!--.data {-->
<!--  background: #fff;-->
<!--  padding: 20px;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.gird {-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.pagination {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--  margin-top: 20px;-->
<!--}-->

<!--.el-table {-->
<!--  border-radius: 8px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.el-table :deep(.el-table__cell) {-->
<!--  padding: 8px 0;-->
<!--}-->

<!--.el-table :deep(.cell) {-->
<!--  line-height: 1.5;-->
<!--}-->

<!--.dialog-footer {-->
<!--  text-align: right;-->
<!--}-->

<!--/* 优化switch样式 */-->
<!--.el-switch {-->
<!--  height: 24px;-->
<!--  min-width: 60px;-->
<!--}-->

<!--.el-switch__core {-->
<!--  min-width: 60px;-->
<!--}-->

<!--.el-switch__label {-->
<!--  color: #fff;-->
<!--  font-size: 12px;-->
<!--  font-weight: bold;-->
<!--  margin: 0 5px;-->
<!--}-->
<!--</style>-->
<template>
  <div class="main">
    <!-- 搜索区域 -->
    <div class="search">
      <el-form :model="meb" ref="searchForm" :inline="true" class="search-form">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="meb.name" style="width: 150px" placeholder="请输入姓名" clearable />
        </el-form-item>

        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="meb.phone" style="width: 150px" placeholder="请输入手机号" clearable />
        </el-form-item>

        <el-form-item label="账号：" prop="account">
          <el-input v-model="meb.account" style="width: 150px" placeholder="请输入账号" clearable />
        </el-form-item>

        <el-form-item label="性别：" prop="sex">
          <el-select v-model="meb.sex" style="width: 120px" placeholder="请选择性别" clearable>
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>

        <el-form-item label="状态：" prop="enabled">
          <el-select v-model="meb.enabled" style="width: 120px" placeholder="请选择状态" clearable>
            <el-option label="启用" :value="true" />
            <el-option label="禁用" :value="false" />
          </el-select>
        </el-form-item>

        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="meb.email" style="width: 180px" placeholder="请输入邮箱" clearable />
        </el-form-item>

        <el-form-item label="QQ：" prop="qq">
          <el-input v-model="meb.qq" style="width: 150px" placeholder="请输入QQ号" clearable />
        </el-form-item>

        <el-form-item label="微信：" prop="wechat">
          <el-input v-model="meb.wechat" style="width: 150px" placeholder="请输入微信号" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" :icon="Search">查询</el-button>
          <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
          <el-button type="success" @click="add" :icon="Plus">添加</el-button>
          <el-button type="danger" @click="deleteRows" :icon="Delete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示区域 -->
    <div class="data">
      <div class="gird">
        <el-table :data="tableData" border style="width: 100%"
                  :header-cell-style="{ textAlign: 'center', background: '#f5f7fa', fontWeight: 'bold' }"
                  :cell-style="{ textAlign: 'center' }" ref="tableRef"
                  v-loading="loading"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" fixed="left" />
          <el-table-column prop="name" label="姓名" width="120" fixed="left" />
          <el-table-column prop="account" label="账号" width="120" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="sex" label="性别" width="80" />
          <el-table-column prop="birthday" label="生日" width="120" />
          <el-table-column prop="qq" label="QQ" width="120" />
          <el-table-column prop="wechat" label="微信" width="120" />
          <el-table-column prop="height" label="身高(cm)" width="100" />
          <el-table-column prop="weight" label="体重(kg)" width="100" />
          <el-table-column prop="cardId" label="身份证号" width="180" />
          <el-table-column prop="race" label="民族" width="100" />
          <el-table-column prop="nationality" label="国籍" width="100" />
          <el-table-column prop="addrDetail" label="详细地址" width="200" show-overflow-tooltip />

          <!-- 状态列 - 改为Switch开关 -->
          <el-table-column prop="enabled" label="状态" width="120" fixed="right">
            <template #default="scope">
              <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
                <el-switch v-model="scope.row.enabled"
                           @change="updateIsLocked(scope.row)"
                           :active-value="true"
                           :inactive-value="false"
                           active-text="启用"
                           inactive-text="禁用"
                           inline-prompt
                           style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;" />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createdTime" label="创建时间" width="160">
            <template #default="scope">
              {{ formatDate(scope.row.createdTime) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button size="small" :icon="Edit" @click="editRow(scope.row)" type="primary">编辑</el-button>
              <el-button size="small" :icon="Delete" @click="deleteRow(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"
                       :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                       :total="pi.total" background @size-change="paginate" @current-change="paginate" />
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="show" :title="title" width="900" draggable :close-on-click-modal="false">
      <el-form :model="mfm" ref="formRef" label-width="100px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="mfm.name" placeholder="请输入姓名" />
            </el-form-item>

            <el-form-item label="账号：" prop="account">
              <el-input v-model="mfm.account" placeholder="请输入账号" />
            </el-form-item>

            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="mfm.phone" placeholder="请输入手机号" />
            </el-form-item>

            <el-form-item label="密码：" prop="password">
              <el-input v-model="mfm.password" type="password" placeholder="请输入密码" />
            </el-form-item>

            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="mfm.email" placeholder="请输入邮箱" />
            </el-form-item>

            <el-form-item label="QQ：" prop="qq">
              <el-input v-model="mfm.qq" placeholder="请输入QQ号" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信：" prop="wechat">
              <el-input v-model="mfm.wechat" placeholder="请输入微信号" />
            </el-form-item>

            <el-form-item label="性别：" prop="sex">
              <el-select v-model="mfm.sex" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>

            <el-form-item label="生日：" prop="birthday">
              <el-date-picker v-model="mfm.birthday" type="date" placeholder="选择生日" style="width: 100%" />
            </el-form-item>

            <el-form-item label="状态：" prop="enabled">
              <el-select v-model="mfm.enabled" placeholder="请选择状态">
                <el-option label="启用" :value="true" />
                <el-option label="禁用" :value="false" />
              </el-select>
            </el-form-item>

            <el-form-item label="身份证号：" prop="cardId">
              <el-input v-model="mfm.cardId" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身高(cm)：" prop="height">
              <el-input-number v-model="mfm.height" :min="0" :max="250" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="体重(kg)：" prop="weight">
              <el-input-number v-model="mfm.weight" :min="0" :max="200" :precision="1" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="详细地址：" prop="addrDetail">
          <el-input v-model="mfm.addrDetail" type="textarea" :rows="2" placeholder="请输入详细地址" />
        </el-form-item>

        <el-form-item label="个性签名：" prop="description">
          <el-input v-model="mfm.description" type="textarea" :rows="2" placeholder="请输入个性签名" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { findAll, deleteById, save, update as updateMember, updateIsLocked as updateMemberIsLocked, deleteAll } from '@/api/MemberApi'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Search, Refresh, Delete } from '@element-plus/icons-vue'

// 表格引用
const tableRef = ref()
const formRef = ref()
// 表格数据
const tableData = ref([])
// 对话框显示状态
const show = ref(false)
// 加载状态
const loading = ref(false)
// 对话框标题
const title = ref("新增会员")
// 选中行
const selectedRows = ref([])

// 搜索条件
const meb = reactive({
  name: "",
  phone: "",
  account: "",
  sex: "",
  enabled: null,
  email: "",
  qq: "",
  wechat: ""
})

// 表单数据
const mfm = reactive({
  name: "",
  phone: "",
  account: "",
  password: "",
  enabled: true,
  sex: "",
  email: "",
  qq: "",
  wechat: "",
  birthday: "",
  height: null,
  weight: null,
  cardId: "",
  addrDetail: "", // 修改为 addrDetail
  description: ""
})

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }]
})

// 分页信息
const pi = ref({
  pageNo: 1,
  pageSize: 15,
  total: 0,
})

// 组件挂载时加载数据
onMounted(() => {
  search()
})

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString()
}

// 处理选中行变化
function handleSelectionChange(selection) {
  selectedRows.value = selection
}

// 搜索方法
async function search() {
  try {
    loading.value = true

    // // 只传递非空的查询参数
    // // const searchParams = {}
    // const searchParams = {
    //   name: meb.name,        // 对应 Members.name
    //   phone: meb.phone,      // 对应 Members.phone
    //   account: meb.account,  // 对应 Members.account
    //   sex: meb.sex,          // 对应 Members.sex
    //   enabled: meb.enabled   // 对应 Members.enabled
    // }
    // Object.keys(meb).forEach(key => {
    //   if (meb[key] !== '' && meb[key] !== null && meb[key] !== undefined) {
    //     searchParams[key] = meb[key]
    //   }
    // })
    // 构建查询参数对象
    const searchParams = {
      pageNo: pi.value.pageNo,
      pageSize: pi.value.pageSize
    }

    // 手动添加所有查询条件
    if (meb.name) searchParams.name = meb.name
    if (meb.phone) searchParams.phone = meb.phone
    if (meb.account) searchParams.account = meb.account
    if (meb.sex) searchParams.sex = meb.sex
    if (meb.enabled !== null) searchParams.enabled = meb.enabled
    if (meb.email) searchParams.email = meb.email
    if (meb.qq) searchParams.qq = meb.qq
    if (meb.wechat) searchParams.wechat = meb.wechat

    console.log("发送的查询参数:", searchParams)

    let resp = await findAll(pi.value.pageNo, pi.value.pageSize, searchParams)

    console.log("API响应:", resp)

    if (resp && resp.code === "200" && resp.data) {
      tableData.value = resp.data.records || []

      // 处理地址显示 - 如果地址为空，显示"暂无地址"
      tableData.value.forEach(member => {
        if (!member.addrDetail || member.addrDetail.trim() === '') {
          member.addrDetail = "暂无地址"
        }
      })

      pi.value.total = resp.data.total || 0
      pi.value.pageNo = resp.data.current || 1
      pi.value.pageSize = resp.data.size || 20

      ElMessage.success(`加载成功，共 ${resp.data.total} 条数据`)
    } else {
      ElMessage.error("数据格式错误")
    }
  } catch (error) {
    console.error("搜索失败:", error)
    ElMessage.error("获取数据失败")
  } finally {
    loading.value = false
  }
}

// 分页查询
function paginate() {
  search()
}

// 重置搜索
function resetSearch() {
  Object.keys(meb).forEach(key => {
    if (key === 'enabled') {
      meb[key] = null
    } else {
      meb[key] = ""
    }
  })
  pi.value.pageNo = 1
  search()
}

// 删除单行
function deleteRow(row) {
  ElMessageBox.confirm(`确定要删除会员【${row.name}】吗？`, "警告", {
    type: "warning",
  }).then(async () => {
    let resp = await deleteById(row.id)
    if (resp.code === "200") {
      ElMessage.success("删除成功")
      search()
    } else {
      ElMessage.error(resp.msg || "删除失败")
    }
  }).catch(() => {})
}

// 批量删除
function deleteRows() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的会员")
    return
  }

  const names = selectedRows.value.map(row => row.name).join('、')
  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个会员吗？\n${names}`, "警告", {
    type: "warning",
  }).then(async () => {
    const ids = selectedRows.value.map(row => row.id)
    let resp = await deleteAll(ids)
    if (resp.code === "200") {
      ElMessage.success("批量删除成功")
      search()
    } else {
      ElMessage.error(resp.msg || "删除失败")
    }
  }).catch(() => {})
}

// 添加会员
function add() {
  show.value = true
  title.value = "新增会员"
  // 重置表单数据
  Object.keys(mfm).forEach(key => {
    if (key === 'enabled') {
      mfm[key] = true
    } else if (key === 'height' || key === 'weight') {
      mfm[key] = null
    } else {
      mfm[key] = ""
    }
  })
}

// 提交表单
function submitForm() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const formData = { ...mfm }
        let resp
        if (formData.id) {
          resp = await updateMember(formData)
        } else {
          resp = await save(formData)
        }

        if (resp.code === "200") {
          ElMessage.success(formData.id ? "修改成功" : "添加成功")
          show.value = false
          search()
        } else {
          ElMessage.error(resp.msg || "操作失败")
        }
      } catch (error) {
        console.error("操作失败:", error)
        ElMessage.error("操作失败")
      }
    }
  })
}

// 编辑行
function editRow(row) {
  show.value = true
  title.value = "修改会员"
  // 复制行数据到表单
  Object.assign(mfm, row)
}

// 更新启用状态
async function updateIsLocked(row) {
  try {
    const resp = await updateMemberIsLocked(row.id, row.enabled)
    if (resp.code === "200") {
      ElMessage.success(row.enabled ? "启用成功" : "禁用成功")
    } else {
      // 操作失败，恢复原来的状态
      row.enabled = !row.enabled
      ElMessage.error(resp.msg || "操作失败")
    }
  } catch (error) {
    console.error("状态更新失败:", error)
    // 操作失败，恢复原来的状态
    row.enabled = !row.enabled
    ElMessage.error("状态更新失败")
  }
}
</script>

<style scoped>
.main {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.search {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.data {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.gird {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table :deep(.el-table__cell) {
  padding: 8px 0;
}

.el-table :deep(.cell) {
  line-height: 1.5;
}

.dialog-footer {
  text-align: right;
}

/* 优化switch样式 */
.el-switch {
  height: 24px;
  min-width: 60px;
}

.el-switch__core {
  min-width: 60px;
}

.el-switch__label {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 0 5px;
}
</style>>